import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Lifecycle, Route,Redirect,hashHistory, Link, IndexRoute } from 'react-router';

const App = React.createClass({
	render() {
		return(
			<div>
				<h1>App</h1>
				<ul>
					<li><Link to="/about" activeStyle={{color:'red' }}>About</Link></li>
					<li><Link to="/inbox" activeStyle={{color:'red' }}>Inbox</Link></li>
				</ul>
				{this.props.children}
			</div>
		);
	}
});

const About = React.createClass({
	render(){
		return (<h3>About</h3>);
	}
});

const Inbox = React.createClass({
  	getInitialState(){
  		console.log("Inbox getInitialState() ");
  		return {}
  	},
  	componentDidMount(){
  		console.log("Inbox componentDidMount()");
  	},

  	componentWillUnmount(){
  		console.log("Inbox componentWillUnmount()");
  	},
  render() {
    return (
      <div>
        <h2>Inbox</h2>
        {this.props.children || "Welcome to your Inbox"}
      </div>
    )
  }
});

const Message = React.createClass({
	componentDidUpdate(){
		console.log("Message update: {this.props.params.id}");
	},
  	render() {
   		return <h3>Message {this.props.params.id}</h3>
  	}
});

const Dashboard = React.createClass({
	render(){
		return (
			<div>Welcome to the app! </div>
		);
	}
});

ReactDOM.render((
	<Router history={hashHistory}>
		<Route path="/" component={App}>
			<IndexRoute component={Dashboard} />
		 	<Route path="about" component={About} />
		 	<Route path="inbox" component={Inbox}>
		 		<Route path="/message/:id" component={Message} />
		 		<Redirect from="message/:id" to="/message/:id" />
		 	</Route>
		</Route>
	</Router>
),document.getElementById('route_app'));
